<!-- 中英文切换 -->
<template>
    <div class="box" title="语言切换">
        <el-dropdown @command="hadlerCommand" trigger="click">
            <span class="el-dropdown-link">
                <span>{{ language == 'en' ? 'English' : '中文' }}</span>
                <el-icon class="el-icon--right">
                    <ArrowDown />
                </el-icon>
            </span>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item command="zh" :disabled="language == 'zh'">中文</el-dropdown-item>
                    <el-dropdown-item command="en" :disabled="language == 'en'">English</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
    </div>
</template>
<script lang="ts" setup>
import { ArrowDown } from '@element-plus/icons-vue'
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useI18n } from 'vue-i18n';
const { locale } = useI18n()  //获取当前的语言
//存储那里有值就拿值没用就给个默认值
let language = ref(localStorage.getItem('language') || 'zh')
//中英文点击事件
const hadlerCommand = (e: string) => {
    language.value = e
    localStorage.setItem('language', e)
    locale.value = e
    ElMessage.success('设置成功')
}
</script>
<style lang="less" scoped>
.box {
    display: flex;
    align-items: center;
    .el-dropdown-link {
        display: flex;
        align-items: center;
        color: #74BCFF;
          span {
            display:block;
            width: 42px;
            text-align: right;
        }
    }
}
.box:hover{
    cursor: pointer;
}
</style>